<style>
    .content-box {
        background-color: #FFF;
        padding: 15px 0 50px 15px;
        margin-bottom: 15px;
        border-radius: 4px;
    }
    .save-btn {
        border: none;
        background: #4B5BDE;
        border-radius: 8px;
        color: #FFFFFF;
        padding: 10px 20px;
    }

    .checkbox2 {
        padding-top: 4px!important;
    }

    .title {
        margin-left: 20px;
        color: #838989;
        height: 32px;
        line-height: 32px;
    }
    
    .fr-ac {
      display: flex;
      align-items: center;
    }
    
    .none {
      display: none;
    }
</style>

<form id="add-form" class="form-horizontal content-box" role="form" data-toggle="validator" method="POST" action="">
    <input type="hidden" id="distributor_id" name="distributor_id" value="{$ids}"/>
    <div class="form-group select_store" style="display: flex;align-items: center;">
        <div class="title">发行地区</div>
        <div class="col-xs-12 col-sm-8">
            <div style="display: flex;">
                <el-cascader
                        v-model="value"
                        :options="options"
                        @change="handleChange"
                        placeholder="请选择地区">
                </el-cascader>
            </div>
        </div>
    </div>
    <div class="form-group fr-ac">
        <div class="title">发行方式</div>
        <div class="radio" style="padding-top: 0;margin: 0 30px;">
            <label><input class="card-type" name="put_mode" value="0" type="radio"/><span>电子卡</span></label>
            <label><input class="card-type" name="put_mode" value="1" type="radio"/><span>实体卡</span></label>
        </div>
        <input class="form-control" style="width: 250px;display: none;" id="address" name="address" type="text" placeholder="邮寄地址"/>
    </div>
    <div class="form-group fr-ac">
        <div class="title">卡类型</div>
        <div class="radio" style="padding-top: 0;margin: 0 30px;">
            <label><input class="card-type" name="is_higher" value="0" type="radio"/><span>普通卡</span></label>
            <label><input class="card-type" name="is_higher" value="1" type="radio"/><span>高职分类卡</span></label>
        </div>
    </div>
    <div class="form-group fr-ac">
        <div class="title">会员卡年份</div>
        <div class="radio" style="padding-top: 5px;margin-left: 20px;">
            <label><input name="year" value="2023" type="radio"/><span>2023</span></label>
            <label><input name="year" value="2024" type="radio"/><span>2024</span></label>
            <label><input name="year" value="2025" type="radio"/><span>2025</span></label>
            <label><input name="year" value="2026" type="radio"/><span>2026</span></label>
            <label><input name="year" value="2027" type="radio"/><span>2027</span></label>
        </div>
    </div>
    <div class="form-group fr-ac">
        <div class="title">发行数量</div>
        <div class="col-xs-6 col-sm-3 fr-ac">
            <div style="margin-right: 10px;">共</div>
            <input id="put_num" data-rule="required" class="form-control" name="put_num" type="number" placeholder="" :value="num" @input="inputNum">
            <div style="margin-left: 10px;">张</div>
        </div>
    </div>
    <div class="form-group fr-ac">
        <div class="title">发行价格</div>
        <div class="radio" style="display: flex;align-items: center;padding-top: 0;">
            <label style="width: 70px;margin-left: 30px;"><input  class="price put_type" name="put_type" value="0" type="radio"/><span>付费</span></label>
            <input class="form-control" style="display: none;" id="put_price" name="put_price" type="number" placeholder="单价"
             :value="univalent" @input="inputUnivalent"/>
            <label  style="width: 70px;margin-left: 30px;"><input class="price put_type" name="put_type" value="1" type="radio"/><span>赠送</span></label>
            <input class="form-control" style="display: none;" id="send_result" name="send_result" type="text" placeholder="赠送理由"/>
        </div>
    </div>
    <div class="form-group fr-ac">
        <div class="title">发行金额</div>
        <div class="col-xs-6 col-sm-3 fr-ac">
            <input id="all_price" data-rule="required" class="form-control" name="all_price" type="number" placeholder="" disabled :value="price">
            <div style="margin-left: 10px;">元</div>
        </div>
    </div>
    <div class="form-group fr-ac">
        <div class="title">是否联名</div>
        <div class="col-xs-12 col-sm-8" style="display: flex;flex-direction: row;align-items: center;">
            <input id="brand_name" class="form-control" name="brand_name" type="text" placeholder="输入联名卡名称" value="">
            <div style="margin-left: 10px;width: 30%;">(非必填)</div>
        </div>
    </div>
    <div class="form-group fr-ac" id="select_pz">
        <div class="title">选择凭证</div>
        <div class="radio" style="padding-top: 2px;margin: 0 30px;">
          <label><input class="voucher" name="voucher" value="1" type="radio" checked="checked"/><span>已付款</span></label>
          <label><input class="voucher" name="voucher" value="2" type="radio"/><span>合同签订</span></label>
          <label><input class="voucher" name="voucher" value="3" type="radio"/><span>员工担保</span></label>
        </div>
    </div>
    <div class="form-group fr-ac" id="voucher1">
        <div class="title">上传凭证</div>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="put_image" data-rule="" class="form-control" size="50" name="put_image" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-put_image" class="btn btn-danger faupload" data-input-id="put_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-put_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-put_image" class="btn btn-primary fachoose" data-input-id="put_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="put_image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-put_image"></ul>
        </div>
    </div>
    <div class="form-group fr-ac none" id="voucher2">
        <div class="title">担保说明</div>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <textarea id="c-guarantee_result" data-rule="" class="form-control" cols="30" rows="5"  name="guarantee_result" type="text" ></textarea>
            </div>
<!--            <ul class="row list-inline faupload-preview" id="p-avatar"></ul>-->
        </div>
    </div>
    <div style="position: relative;">
        <button class="save-btn add_button" type="button">确认发行</button>
    </div>
</form>

<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">